<template>
  <div class="page-main">
      <van-sticky>
        <div class="van-nav-bar van-hairline--bottom">
          <div class="van-nav-bar__content">
            <div class="van-nav-bar__left">
              <slot name="left">
                <i class="van-icon van-icon-arrow-left van-nav-bar__arrow" @click="onClickLeft"></i>
              </slot>
            </div>
            <div class="van-nav-bar__title van-ellipsis">{{default_title}}</div>
            <div class="van-nav-bar__right">
              <slot name="right" />
            </div>
          </div>
        </div>
      </van-sticky>
	  <slot />
  </div>
</template>

<script>
export default {
  name: 'PageMain',
  props: {
    title: {
      type: String,
      default: ''
    },
    backUrl:{
      type: String,
    }
  },
  data(){
      return{
          default_title: null
      }
  },
  created(){
      this.default_title = this.title || this.$route.meta.title;
  },
  watch:{
      title(newVal, oldVal){
        this.default_title = newVal;
      }
  },
  methods:{
	  onClickLeft(){
      if(this.backUrl){
        this.$util.gotoPage(this.backUrl);
      }else{
        this.$router.back(-1);
      }		
	  },
  }
}
</script>